<template>
    <div class="super">
        <van-nav-bar title="超级节点" leftArrow @click-left="_return"/>
        <div class="superMain">
            <div class="lev" >
                <van-row type="flex" justify="space-between">
                    <van-col :span="12">
                        <p>{{$t('node.nowPool')}}</p>
                        <span>{{mine.level}}</span>
                    </van-col>
                    <van-col :span="12">
                        <p>{{$t('node.nowLead')}}</p>
                        <span>{{mind.level}}</span>
                    </van-col>
                </van-row>
            </div>
            <div class="child" v-if="!mine">
                <div class="top">
                    <p class="title">{{mine.username}} <span>{{mine.level}}</span></p>
                    <p class="tel">
                        <span>{{$t('common.account_remind')}}</span>
                        <span>{{mine.time}}</span>
                    </p>
                </div>
                <div class="bottom">
                    <van-row type="flex" justify="space-between">
                        <van-col :span="12">
                            <p>{{mine.rengou}}</p>
                            <span>{{$t('node.rengou')}}</span>
                        </van-col>
                        <van-col :span="12">
                            <p>{{mine.total>10000?(((mine.total-mine.total%1000)/10000+'W')):(mine.total)}}</p>
                            <span>{{$t('node.yeji')}}</span>
                        </van-col>
                    </van-row>
                </div>
            </div>
            <div class="child" v-if="!mind">
                <div class="top">
                    <p class="title">{{mind.username}} <span>{{mind.level}}</span></p>
                    <p class="tel">
                        <span>{{$t('common.account_remind')}}</span>
                        <span>{{mind.time}}</span>
                    </p>
                </div>
                <div class="bottom">
                    <van-row type="flex" justify="space-between">
                        <van-col :span="12">
                            <p>{{mind.rengou}}</p>
                            <span>{{$t('node.rengou')}}</span>
                        </van-col>
                        <van-col :span="12">
                            <p>{{mind.total>10000?(((mind.total-mind.total%1000)/10000+'W')):(mind.total)}}</p>
                            <span>{{$t('node.yeji')}}</span>
                        </van-col>
                    </van-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
                mine:{},
                mind:{}
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getData(){
                this.$api.post('NodeConvert/suPer',{type:2})
                    .then(res =>{
                        this.mine = res.detail.klist
                        this.mind = res.detail.dlist
                        this.mine.level = res.detail.levelk[this.mine.level]
                        this.mind.level = res.detail.leveld[this.mind.level]
                        this.mine.time = moment(this.mine.time*1000).format('YYYY.MM.DD')
                        this.mind.time = moment(this.mind.time*1000).format('YYYY.MM.DD')
                    })
            }
        },
        created() {
            this.getData()
        },
        mounted() {

        },
    }
</script>

<style lang="stylus" scoped>
    [class*=van-hairline]::after{
        border: none;
    }
    .superMain
        margin-top 5px
        .lev
            padding 25px 0 20px
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            .van-col
                &:first-child
                    border-right 1px solid #D8D8D8
                p
                    color #898989
                    font-size 12px
                    text-align center
                span
                    color #DBC8AA
                    font-size 18px
                    display block
                    text-align center


        .child
            margin-top 5px
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
            box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
            &:not(first-child)
                margin-top 10px
            .top
                padding 10px
                .title
                    color #D8D8D8
                    font-size 16px
                    span
                        background:linear-gradient(270deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%);
                        color #414141
                        padding 2px 9px
                        font-size 12px
                        margin-left 4px

                .tel
                    display flex
                    justify-content space-between
                    margin-top 10px
                    span
                        color #FFFFFF
                        font-size 14px



            .bottom
                padding 25px 0 20px
                background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
                box-shadow:0px 6px 12px 0px rgba(0,0,0,0.5);
                .van-col
                    &:first-child
                        border-right 1px solid #D8D8D8
                    p
                        color #DBC8AA
                        font-size 24px
                        text-align center
                    span
                        margin-top 7px
                        color #898989
                        font-size 12px
                        display block
                        text-align center





</style>